{% extends 'account/base.html' %}

{% block main %}
    <div class="profile-card">
        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
            <legend>用户基本数据修改</legend>
        </fieldset>
        <form class="layui-form" action="">
            <div class="layui-form-item">
                <label class="layui-form-label">用户昵称：</label>
                <div class="layui-input-block">
                    <input type="text" name="username" required lay-verify="required"
                           placeholder="请输入昵称" autocomplete="off" class="layui-input"
                           value="{{ current_user.nick_name }}"
                    >
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">用户签名：</label>
                <div class="layui-input-block">
                    <textarea name="signature" placeholder="请输入内容"
                              class="layui-textarea">{{ current_user.signature }}</textarea>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">性别：</label>
                <div class="layui-input-block">
                    <input type="radio" name="gender" value="MAN" title="男" {% if current_user.gender=='MAN' %}
                           checked {% endif %}   >
                    <input type="radio" name="gender" value="WOMAN" title="女" {% if current_user.gender=='WOMAN' %}
                           checked {% endif %}>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">生日：</label>
                <div class="layui-input-inline">
                    <input type="text" class="layui-input" name="birthday" id="birth_day">
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="base_info">立即修改</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>
        <fieldset class="layui-elem-field layui-field-title"
                  style="margin-top: 100px;">
            <legend>修改用户头像</legend>
        </fieldset>
        <form class="layui-form" action="">
            <div class="layui-form-item">
                <label class="layui-form-label">当前头像：</label>
                <div class="layui-input-block avatar">
                    <img src="{{ current_user.avatar_url }}" alt="用户图片" class="now_user_pic">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">上传图像：</label>
                <div class="layui-input-block">
                    {#                    <input type="text" name="avatar_url" class="input_file" style="display: none">#}
                    <button type="button" class="layui-btn" id="test1">
                        <i class="layui-icon">&#xe67c;</i>上传图片
                    </button>
                </div>

            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="submit-avatar">立即修改</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>
        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 100px;">
            <legend>修改密码</legend>
        </fieldset>
        <form class="layui-form" action="">
            <div class="layui-form-item">
                <label class="layui-form-label">当前密码：</label>
                <div class="layui-input-block avatar">
                    <input type="password" name="old_password" required lay-verify="required"
                           placeholder="请输入当前密码" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">新密码：</label>
                <div class="layui-input-block">
                    <input type="password" name="new_password" required lay-verify="required"
                           placeholder="请输入新密码" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">确认密码：</label>
                <div class="layui-input-block">
                    <input type="password" name="sure_password" required lay-verify="required"
                           placeholder="再次输入新密码" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="submit_password">立即修改</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>
    </div>
{% endblock %}


{% block footer_script %}
    <script>
      layui.use(['form', 'upload', 'jquery'], function() {
        var form = layui.form;
        var upload = layui.upload;
        var laydate = layui.laydate;
        var $ = layui.jquery;

        // 执行一个 lay date 实例
        laydate.render({
          elem: '#birth_day', //指定元素
          value: '{{current_user.create_time.date()}}',
        });

        // 监听提交
        form.on('submit(base_info)', function(data) {
          {#layer.msg(JSON.stringify(data.field));#}
          fetch('/account/info', {
            method: 'POST',
            headers: {
              'Content-Type': 'application/json',
            },
            body: JSON.stringify(data.field),
          }).then(function(response) {
            return response.json();
          }).then(function(ret) {
            console.log(ret);
          });
          return false;
        });

        form.on('submit(submit_password)', function(form) {
          if (form.field.new_password !== form.field.sure_password) {
            layer.msg('两次密码输入不一样');
            return false;
          }
          fetch('/account/password', {
            method: 'POST',
            headers: {
              'Content-Type': 'application/json',
            },
            body: JSON.stringify(form.field),
          }).then(function(response) {
            return response.json();
          }).then(function(ret) {
            console.log(ret);
            // 密码修改成功,需要重新登录
            location.href = '/login';
          });
          return false;
        });
//执行实例
        var uploadInst = upload.render({
          elem: '#test1' //绑定元素
          , url: '/account/avatar' //上传接口
          , done: function(res) {
            //上传完毕回调
            console.log(res);
            $('.avatar image').src = res.avatar_url;
          }
          , error: function() {
            //请求异常回调
          },
        });
      });
    </script>
{% endblock %}
